<template>
  <div>
    <van-nav-bar style="padding:9px;background-color: cornsilk"
                 left-arrow
                 @click-left="onClickLeft()"
    />
    <!--    1.创建标签-->
    <div id="dvmap"></div>
    <div>

    </div>
    <div>
      <van-row>
        <van-col span="8">
          <van-button round type="primary" class="bt1" @click=rundirect()>步行导航</van-button>
        </van-col>
        <van-col span="8">
          <van-button round type="primary" class="bt1" @click=cardirect()>汽车导航</van-button>
        </van-col>
        <van-col span="8">
          <van-button round type="primary" class="bt1" @click=driverirect()>骑行导航</van-button>
        </van-col>
      </van-row>
    </div>
    <div id="in1">

    </div>
  </div>
</template>
<script>
export default {
  name:"Home",
  lng1:"",
  data(){
    return{
      lng: 116.404,
      lat: 39.915,
      pt:{
        lng:0,
        lat:0
      },
      aim:"景点",
      lng1:0
    }
  },
  mounted() {
    //页面加载就调用
    var map = new BMapGL.Map("dvmap");
    // 创建地图实例
    var point = new BMapGL.Point(this.lng, this.lat);
    // 创建点坐标
    map.centerAndZoom(point, 15);
    var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
    map.addControl(navi3DCtrl);
    //添加滚轮缩放
    map.enableScrollWheelZoom(true);
    //实现地址的逆解析：把经纬度转换为地址信息
    var myGeo = new BMapGL.Geocoder();
    // 添加比例尺
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);


    var local = new BMapGL.LocalSearch(map, {
      renderOptions:{map: map}
    });
    local.search(this.aim);

    //添加缩放空间
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    //添加定位控件
    var locationCtrl = new BMapGL.LocationControl();
    map.addControl(locationCtrl);
    //获取到当前位置坐标
    var geoc = new BMapGL.Geolocation();
    geoc.getCurrentPosition(function (e){
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var pt = e.point;
        myGeo.getLocation(pt,function(result){
          if (result){
          }else {
            alert("定位失败！")
          }
        })
      }
    })
  },created(){
    this.getParams()
  },
  methods:{
    cardirect(){
      var geoc = new BMapGL.Geolocation();
      var lng=this.lng
      var lat=this.lat
      var box = document.getElementById("in1")
      geoc.getCurrentPosition(function (e){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          var pt = e.point;
          //页面加载就调用
          var map = new BMapGL.Map("dvmap");
          //计算路线
          map.centerAndZoom(new BMapGL.Point(lng, lat), 12);
          var output = "从当前位置到目的地驾车需要";
          var searchComplete = function (results){
            if (driving.getStatus() != BMAP_STATUS_SUCCESS){
              return ;
            }
            var plan = results.getPlan(0);
            output += '总时长：' + plan.getDuration(true);  //获取时间
            output += '总路程：' + plan.getDistance(true);  //获取距离
          }
          // 创建地图实例
          var point = new BMapGL.Point(lng,lat);
          //添加滚轮缩放
          map.enableScrollWheelZoom(true);
          var p1 = new BMapGL.Point(pt.lng,pt.lat);
          var driving = new BMapGL.DrivingRoute(map, {renderOptions: {map: map},
            onSearchComplete: searchComplete,
            onPolylinesSet: function(){
              setTimeout(function(){box.innerHTML="<span>"+output+"</span>"},"1000");
            }});
          driving.search(p1,point);
        }
      })
    },
    getParams(){
      // 取到路由带过来的参数
      const routerParams = this.$route.query
      // 将数据放在当前组件的数据内
      // this.mallInfo.searchMap.mallCode = routerParams;
      // this.keyupMallName()
      this.lng=routerParams.lng;
      this.lat=routerParams.lat;
    },
    rundirect(){
      this.$toast("嘿嘿！开车去吧亲！")
    },
    driverirect(){
     //  var geoc = new BMapGL.Geolocation();
     //  var lng=this.lng
     //  var lat=this.lat
     //  var map = new BMapGL.Map("dvmap");
     //  // 创建地图实例
     //  var point = new BMapGL.Point(this.lng, this.lat);
     //  // 创建点坐标
     //  map.centerAndZoom(point, 15);
     // geoc.getCurrentPosition((e)=> {
     //   this.lng1 = e.point.lng
     //   // this.lat1 = e.point.lat
     //   // console.log(this.lng)
     //
     // })
     //  var riding = new BMapGL.RidingRoute(map, {
     //    renderOptions: {
     //      map: map,
     //      autoViewport: true
     //    }
     //  });
     //  var start = new BMapGL.Point(116.310791, 40.003419);
     //  var end = new BMapGL.Point(lng, lat);
     //  console.log(this.lng1)
     //  // console.log(end)
     //  riding.search(start, end);
      this.$toast("嘿嘿！开车去吧亲！")
    },
    onClickLeft(){
    history.back()
    },

  },
  watch:{
    '$route': 'getParams'
  }
}
</script>
<style>
#dvmap{
  height: 30rem;
  width: 100%;
  overflow: hidden;
}
</style>